const { merge } = require("webpack-merge");
const { baseConfig } = require("../webpack.base.config");
const path = require("path");
const webpack = require("webpack");

module.exports = merge(baseConfig, {
  mode: "development",
  devtool: "source-map",
  cache: {
    type: "filesystem", // 使用文件缓存,提升构建速度,第一次构建会加大构建速度
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                auto: (resourcePath) => resourcePath.endsWith(".module.less"), // 匹配.module.less文件来进行css模块化。
                localIdentName: "[local]_[hash:base64:10]",
              },
              // modules: true,
            },
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                modifyVars: {
                  "@primary-color": "#405ce2",
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      // 定义环境变量
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, "..", "..", "dist/client"),
      serveIndex: true,
    },
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    compress: true,
    host: "127.0.0.1",
    hot: true,
    port: 9090,
    open: true,
    historyApiFallback: true,
    proxy: {},
  },
});
